import { Button,Slider,Row,Col,Card } from 'antd'
import React,{useEffect,useRef} from 'react'
import './index.less'
import axios from 'axios'
import * as echarts from 'echarts'
// import {init} from 'echarts'
import bar from './options/bar'
import line from './options/line'
import pie from './options/pie'
import {chartGet} from '../../api/cake'
export default function DashBoard() {
  let barRef = useRef()
  let lineRef = useRef()
  let pieRef = useRef()
  useEffect(()=>{
    // 测试代理
    // let url = `/smart/product/home`
    // axios.get(url).then(res=>{
    //   console.log(res);
    // })
    // let barChart = init(barRef.current)
    // 柱状图
    let barChart = echarts.init(barRef.current)
    barChart.setOption(bar);

    // 线状图
    let lineChart = echarts.init(lineRef.current)
    lineChart.setOption(line)

    // 饼状图
    let pieChart = echarts.init(pieRef.current)
    chartGet('饼状图').then(res=>{  
      // console.log(res);  
      pie.series[0].data = res.data.results[0].data
      // console.log(pie);  
      pieChart.setOption(pie) 
    })
  },[])
  return (
    <div>
      <Row>
        <Col span={24}>
          <Card title="柱状图">
            <div className='chart' ref={barRef}></div>
          </Card>
        </Col>
      </Row>
      <Row gutter={30}>
        <Col span={12}>
          <Card title="线状图">
            <div className='chart' ref={lineRef}></div>
          </Card>
        </Col>
        <Col span={12}>
          <Card title="饼状图">
           <div className='chart' ref={pieRef}></div>
          </Card>
        </Col>
      </Row>

    </div>
  )
}
